import { InputNumber, Typography } from 'antd';
import React from 'react';

import styles from './index.less';

const { Text } = Typography;

const CommonInputNumber: React.FC<TCustomFormIptNumProps<number>> = (props) => {
  const { text, unit, value, onChange, onChanges, extraInfo, ...restProps } = props;

  return (
    <>
      <div className={styles.disCountView}>
        {text && (
          <div className={styles.innerTextView}>
            <Text type="secondary">{text}</Text>
          </div>
        )}
        <InputNumber
          className={styles.userInput}
          bordered={false}
          min={1}
          value={value}
          onChange={(v) => {
            onChange && onChange(v);
            onChanges && onChanges(v);
          }}
          {...restProps}
        />
        <div className={styles.innerRightTextView}>
          <Text type="secondary">{unit}</Text>
        </div>
      </div>
      {extraInfo && <span style={{ marginLeft: 10 }}>可获得</span>}
    </>
  );
};

export default CommonInputNumber;
